<template>
  <view>
    <!-- 测试 -->
    <view class="test" v-if="true">
      <u-button type="primary" text="测试渠道" @click="onChannel"></u-button>
      <u-button type="warning" text="测试下单" @click="onOrder"></u-button>
      <u-button type="success" text="取消" @click="onCancel"></u-button>
      <u-button type="info" text="查询" @click="onQuery"></u-button>
      <u-button type="info" text="地址解析" @click="parseAddress"></u-button>
    </view>
    <view v-if="!wx" class="express-order">
      <!-- 地址 -->
      <view class="address">
        <view class="send">
          <view class="icon">
            <u--image width="50rpx" height="50rpx" lazy-load :fade="true" duration="450" src="/static/express/send.png"></u--image>
          </view>
          <view class="info" @click="goAddressCreate('is_send=1', send)">
            <template v-if="send && send.city">
              <view class="name">{{ send.nickname }} {{ send.mobile }}</view>
              <view class="desc one-lines">
                {{ send.city.province }}
                {{ send.city.city }}
                {{ send.city.area }}
                {{ send.address }}
              </view>
            </template>
            <view class="" v-else @click="goAddressCreate('is_send=1')">请填写寄件人信息</view>
          </view>
          <view class="text" @click="goAddressList('is_send=1')">地址列表</view>
        </view>
        <view class="receive">
          <view class="icon">
            <u--image width="50rpx" height="50rpx" lazy-load :fade="true" duration="450" src="/static/express/receive.png"></u--image>
          </view>
          <view class="info" @click="goAddressCreate('is_receive=1', receive)">
            <template v-if="receive && receive.city">
              <view class="name">{{ receive.nickname }} {{ receive.mobile }}</view>
              <view class="desc one-lines">
                {{ receive.city.province }}
                {{ receive.city.city }}
                {{ receive.city.area }}
                {{ receive.address }}
              </view>
            </template>
            <view class="" v-else @click="goAddressCreate('is_receive=1')">请填写收件人信息</view>
          </view>
          <view class="text" @click="goAddressList('is_receive=1')">地址列表</view>
        </view>
      </view>
      <view class="product" @click="openProduct">
        <view class="left">
          <view class="title">物品信息</view>
          <view class="title_sub">必填</view>
        </view>
        <view class="right">
          <view class="text" v-if="product.name && product.weight">{{product.name}}, {{product.weight}}kg</view>
          <view v-else>请填写物品信息</view>
          <u-icon name="arrow-right" color="#999999" size="24"></u-icon>
        </view>
      </view>
      <view class="company" @click="openCompany">
        <view class="left">
          <view class="title">配送公司</view>
          <view class="title_sub">必填</view>
        </view>
        <view class="right">
          <view class="text" v-if="selectChannel.tagType">{{ selectChannel.tagType }}</view>
          <view v-else>请选择</view>
          <u-icon name="arrow-right" color="#999999" size="24"></u-icon>
        </view>
      </view>
      <view class="time" @click="openTime">
        <view class="left">
          <view class="title">预约时间</view>
        </view>
        <view class="right">
          <view v-if="time.length > 0" class="one-lines active">{{ time }}</view>
          <view v-else>请选择</view>
          <u-icon name="arrow-right" color="#999999" size="24"></u-icon>
        </view>
      </view>
      <view class="insured">
        <view class="left">
          <view class="title">保价金额</view>
        </view>
        <view class="right">
          <u--input
              :disabled="true"
              placeholder="输入物品价值,高于1元"
              border="surround"
              v-mdoel="insured"
          ></u--input>
        </view>
      </view>
      <view class="ticket" @click="openTicket">
        <view class="left">
          <view class="title">优惠券</view>
        </view>
        <view class="right">
          <view v-if="ticket > 0" class="one-lines active">{{ ticket }}元</view>
          <view v-else>请选择</view>
          <u-icon name="arrow-right" color="#999999" size="24"></u-icon>
        </view>
      </view>
      <view class="remark" @click="openRemark">
        <view class="left">
          <view class="title">备注</view>
        </view>
        <view class="right">
          <view v-if="remark.length > 0" class="one-lines active">{{ remark }}</view>
          <view v-else>请选择</view>
          <u-icon name="arrow-right" color="#999999" size="24"></u-icon>
        </view>
      </view>
      <view class="footer">
        <view class="desc">
          <text class="text">预估总价</text>
          <text class="amount">￥ {{amount}}</text>
        </view>
        <view class="btn">
          <u-button type="primary" text="下单" @click="onOrder"></u-button>
        </view>
      </view>
      <!-- 备注弹层 -->
      <u-popup :show="showRemark" mode="bottom"  @close="closeRemark" :round="10">
        <view class="remark-pop">
          <view class="title">请填写备注:</view>
          <u--textarea v-model="remark" placeholder="20字以内" :maxlength="20"></u--textarea>
          <view class="btn">
            <u-button text="确定" type="primary" @click="closeRemark"></u-button>
          </view>
        </view>
      </u-popup>
      <!-- 消息提示 -->
      <u-toast ref="uToast"></u-toast>
      <!-- 预约时间 -->
      <u-popup :show="showTime" mode="bottom"  @close="closeTime" :round="10" closeable>
        <view class="time-pop">
          <view class="title">期望取件时间</view>
          <view class="text">您好! 请至少提前半小时预约上门时间, 若是紧急件请与快递员沟通,实际上门时间以协商后为准</view>
          <view class="list">
            <view class="day">
              <view class="d" @click="selectTimeDay(item)" :class="{'active': time_day === item}" v-for="(item, index) in timeList.day" :key="index">
                {{ item }}
              </view>
            </view>
            <view class="times">
              <view class="t" @click="selectTimeTime(item)" :class="{'active': time_time === item}" v-for="(item, index) in timeList.time" :key="index">
                {{ item }}
              </view>
            </view>
          </view>
        </view>
      </u-popup>
      <!-- 快递公司 -->
      <u-popup :show="showCompany" mode="bottom"  @close="closeCompany" :round="10">
        <view class="remark-pop">
          <view class="title">选择配送公司:</view>
          <view class="title_sub">此为预估运费,超重请回平台补缴运费</view>
          <view class="list">
            <!--<template v-for="(item, index) in channelList">-->
            <!--  <view class="item" :key="index" @click="handelSelectChannel(item)">-->
            <!--    <view class="title">-->
            <!--      <view class="icon">-->
            <!--        <u&#45;&#45;image-->
            <!--            shape="circle"-->
            <!--            width="50rpx" height="50rpx"-->
            <!--            lazy-load :fade="true" duration="450" :src="item.channelLogoUrl"></u&#45;&#45;image>-->
            <!--      </view>-->
            <!--      <view class="name">{{item.tagType}}</view>-->
            <!--    </view>-->
            <!--    <view class="content">-->
            <!--      <view class="title">{{item.channel}}</view>-->
            <!--      <view class="price">首重: {{ (item.priceOne + item.priceOne * ratio / 100).toFixed(2)}}元,-->
            <!--        续重: {{ (item.priceMore + item.priceMore * ratio / 100).toFixed(2)}}元</view>-->
            <!--      <view class="amount">-->
            <!--        <text class="text">￥</text>-->
            <!--        &lt;!&ndash;<text>{{ item.freight }}</text>&ndash;&gt;-->
            <!--        <text>{{ (item.totalFreight + item.totalFreight * ratio / 100).toFixed(2)  }}</text>-->
            <!--      </view>-->
            <!--    </view>-->
            <!--  </view>-->
            <!--</template>-->
            <template v-for="(item, index) in channelList">
              <view class="item" :key="index">
                <view class="title">
                  <view class="icon" v-if="item.list && item.list[0]">
                    <u--image
                        shape="circle"
                        width="50rpx" height="50rpx"
                        lazy-load :fade="true" duration="450" :src="item.list[0].channelLogoUrl"></u--image>
                  </view>
                  <view class="name">{{item.name}}</view>
                </view>
                <view class="content" v-for="(o, i) in item.list" :key="i"  @click="handelSelectChannel(o)">
                  <view class="title">{{o.channel}}</view>
                  <view class="price">首重: {{ (o.priceOne + o.priceOne * ratio / 100).toFixed(2)}}元,
                    续重: {{ (o.priceMore + o.priceMore * ratio / 100).toFixed(2)}}元</view>
                  <view class="amount">
                    <text class="text">￥</text>
                    <!--<text>{{ item.freight }}</text>-->
                    <text>{{ (o.totalFreight + o.totalFreight * ratio / 100).toFixed(2)  }}</text>
                  </view>
                </view>
              </view>
            </template>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
/*
  快递下单页面
 */
import config from '../../config/config'
import base64 from '../../util/base64'
import Express from '../../api/express'
const expressModel = new Express()
export default {
  computed: {
    amount() {
      if (this.selectChannel && this.selectChannel.freight) {
        const freight = this.selectChannel.totalFreight
        return (freight + freight * this.ratio / 100 - this.ticket).toFixed(2)
      }

      return '__'
    },
    time() {
      return `${this.time_day},${this.time_time}`
    }
  },
  data() {
    return {
      wx: true,
      baseUrl: config.baseUrl,
      showRemark: false,
      remark: '',
      // sendAddress: 0,
      // receiveAddress: 0,
      send: {},
      receive: {},
      product: {},
      company: {},
      showCompany: false,
      ticket: 0,
      // 因为只有德邦支付保价
      // 而且输入的保价越高, 需要的费用越多
      // 帐户可能会被搞光
      insured: 0,
      // 渠道
      channelList: [],
      selectChannel: {},
      // 加价比例
      ratio: 0,
      // time: '',
      timeList: {
        day: ['今天', '明天', '后天'],
        time: [
          '09:00 - 11:00',
          '11:00 - 13:00',
          '13:00 - 15:00',
          '15:00 - 17:00',
        ]
      },
      showTime: false,
      time_day: '',
      time_time: '',
      // 下单类型
      type: 0
    }
  },
  methods: {

    selectTimeDay(text) {
      this.time_day = text
    },
    selectTimeTime(text) {
      this.time_time = text
    },

    // 时间
    closeTime() {
      this.showTime = false
    },
    openTime() {
      this.showTime = true
    },

    // 处理加价
    set() {
      expressModel.getUniSet().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.ratio = data.ratio
        this.wx = data.wx
        console.log(data)

        if (this.wx) {
          uni.switchTab({
            url: '/pages/index/index'
          })
        }
      })
    },

    // 备注操作
    closeRemark() {
      this.showRemark = false
    },
    openRemark() {
      this.showRemark = true
    },

    // 优惠券操作
    openTicket() {
      uni.navigateTo({
        url: '/sub_express/ticket/index'
      })
    },

    // 物品信息
    openProduct() {
      if (!this.send || Object.keys(this.send).length === 0) {
        this.$refs.uToast.show({
          type: 'error',
          icon: false,
          message: '请填写发件人信息',
        })
      } else if (!this.receive || Object.keys(this.receive).length === 0) {
        this.$refs.uToast.show({
          type: 'error',
          icon: false,
          message: '请填写收件人信息',
        })
      } else {
        uni.navigateTo({
          url: '/sub_express/product/index'
        })
      }
    },

    // 快递公司
    openCompany() {
      const keys = Object.keys(this.product)
      if (keys.length === 0) {
        this.$refs.uToast.show({
          type: 'error',
          icon: false,
          message: '请填写物品信息',
        })
      } else {
        this.showCompany = true
        // 查询渠道
        this.onChannel()
      }
    },
    closeCompany() {
      this.showCompany = false
    },

    // 地址
    goAddressCreate(params, item = null) {
      let url
      if (item) {
        url = `/sub_service/address/edit?id=${item.id}&type=-2&is_express=1&${params}`
      } else {
        url = `/sub_service/address/edit?type=-2&is_express=1&${params}`
      }
      uni.navigateTo({
        url
      })
    },
    goAddressList(params) {
      uni.navigateTo({
        url: `/sub_service/address/index?express=1&${params}&type=-2`
      })
    },

    // 选择渠道
    handelSelectChannel(item) {
      this.selectChannel = item
      this.showCompany = false
      console.log(this.selectChannel)
    },

    // 查询渠道
    onChannel() {

      // const content = {
      //   "channelTag":"智能", // 必填： 智能，得物，重货
      //   // "channelSubTag":"申通",// 可选：指定快递类型：京东、德邦、顺丰、申通、极兔、圆通、中通、韵达、菜鸟等
      //   "sender": "凡哥",
      //   "senderMobile": "18620885097",
      //   "senderProvince": "广东省",
      //   "senderCity": "广州市",
      //   "senderCounty": "天河区",
      //   // "senderTown": "车陂街道",
      //   "senderLocation": "东圃大马路216",
      //   // "senderAddress": "辽宁沈阳市铁西区兴华街道兴华南街沈辽路万达C2107",
      //   "receiver": "凡哥",
      //   "receiverMobile": "18620885097",
      //   "receiveProvince": "广东省",
      //   "receiveCity": "广州市",
      //   "receiveCounty": "天河区",
      //   // "receiveTown": "东苑街道",
      //   // "receiveLocation": "谈固南大街国际城二期",
      //   // "receiveAddress": "河北石家庄市裕华区裕东街道谈固南大街国际城二期",
      //   "weight": 1,
      //   "packageCount": 1,
      //   // "insured": 2000,
      //   // "vloumLong": 40,
      //   // "vloumWidth": 50,
      //   // "vloumHeight": 60
      // }

      const params = this.$store.getters['Express/params']

      const content = {
        "channelTag": this.type == 2 ? "重货": "智能",
        "channelType": 2,
        "sender": params.send.nickname,
        "senderMobile": params.send.mobile,
        "senderProvince": params.send.city.province,
        "senderCity": params.send.city.city,
        "senderCounty": params.send.city.area,
        "senderLocation": params.send.address,
        "receiver": params.receive.nickname,
        "receiverMobile": params.receive.mobile,
        "receiveProvince": params.receive.city.province,
        "receiveCity": params.receive.city.city,
        "receiveCounty": params.receive.city.area,
        "receiveLocation": params.receive.address,
        "weight": params.product.weight,
        "packageCount": params.product.quantity,
        // "insured": 2000,
        // "vloumLong": params.product.volume.length,
        // "vloumWidth": params.product.volume.width,
        // "vloumHeight": params.product.volume.height,
      }

      // 处理数字
      // if(!isNaN(+params.product.volume.length)) {
      //   content.vloumLong = isNaN(+params.product.volume.length)
      // }
      // if(!isNaN(+params.product.volume.width)) {
      //   content.vloumWidth = isNaN(+params.product.volume.width)
      // }
      // if(!isNaN(+params.product.volume.height)) {
      //   content.vloumHeight = isNaN(+params.product.volume.height)
      // }

      console.log(content)

      expressModel.apiChannel({ content }).then(response => {
        let { data } = response
        data = base64.parse(data)
        console.log(data)
        this.channelList = data.result
        // 分组
        /**
         * 根据共同属性将数据分组
         * @param data [数据源]
         * @param field [字段名]
         */
        const groupingData = (data, filed, name) => {
          let map = {}
          let dest = []
          data.forEach(item => {
            if(!map[item[filed]]) {
              dest.push({
                [filed]: item[filed],
                ['name']: item[name],
                list: [item]
              })
              map[item[filed]] = item;
            } else {
              dest.forEach(dItem => {
                if (dItem[filed] == item[filed]) {
                  dItem.list.push(item)
                }
              })
            }
          })
          return dest
        }
        this.channelList = groupingData(this.channelList, 'tagCode', 'tagType')
        console.log(this.channelList)
      })
    },

    // 下单
    onOrder() {
      if (!this.selectChannel.channelId) {
        return uni.showToast({
          icon: 'none',
          title: '请选择配送公司'
        })
      }
      if (!this.product.name) {
        return uni.showToast({
          icon: 'none',
          title: '你选择物品信息'
        })
      }

      // const content = {
      //   "channelId": "1863496415167254528",
      //   "channelTag":"智能", // 必填： 智能，得物，重货
      //   // "channelSubTag":"申通",// 可选：指定快递类型：京东、德邦、顺丰、申通、极兔、圆通、中通、韵达、菜鸟等
      //   "sender": "凡哥",
      //   "senderMobile": "18620885097",
      //   "senderProvince": "广东省",
      //   "senderCity": "广州市",
      //   "senderCounty": "天河区",
      //   // "senderTown": "车陂街道",
      //   "senderLocation": "东圃大马路216",
      //   // "senderAddress": "辽宁沈阳市铁西区兴华街道兴华南街沈辽路万达C2107",
      //   "receiver": "凡哥",
      //   "receiverMobile": "18620885097",
      //   "receiveProvince": "广东省",
      //   "receiveCity": "广州市",
      //   "receiveCounty": "天河区",
      //   // "receiveTown": "东苑街道",
      //   "receiveLocation": "东圃大马路216",
      //   // "receiveAddress": "河北石家庄市裕华区裕东街道谈固南大街国际城二期",
      //   "weight": 1,
      //   "packageCount": 1,
      //   "itemName": "测试商品",
      //   // "insured": 2000,
      //   // "vloumLong": 40,
      //   // "vloumWidth": 50,
      //   // "vloumHeight": 60
      // }

      const params = this.$store.getters['Express/params']
      console.log(params)

      const content = {
        "channelTag":"智能",
        "sender": params.send.nickname,
        "senderMobile": params.send.mobile,
        "senderProvince": params.send.city.province,
        "senderCity": params.send.city.city,
        "senderCounty": params.send.city.area,
        "senderLocation": params.send.address,
        "receiver": params.receive.nickname,
        "receiverMobile": params.receive.mobile,
        "receiveProvince": params.receive.city.province,
        "receiveCity": params.receive.city.city,
        "receiveCounty": params.receive.city.area,
        "receiveLocation": params.receive.address,
        "weight": params.product.weight,
        "packageCount": params.product.quantity,
        // "insured": 2000,
        // "vloumLong": params.product.volume.length,
        // "vloumWidth": params.product.volume.width,
        // "vloumHeight": params.product.volume.height,
      }

      // 处理数字
      // if(!isNaN(+params.product.volume.length)) {
      //   content.vloumLong = isNaN(+params.product.volume.length)
      // }
      // if(!isNaN(+params.product.volume.width)) {
      //   content.vloumWidth = isNaN(+params.product.volume.width)
      // }
      // if(!isNaN(+params.product.volume.height)) {
      //   content.vloumHeight = isNaN(+params.product.volume.height)
      // }

      // 渠道
      content.channelId = this.selectChannel.channelId
      // 商品名称
      content.itemName = this.product.name
      // expressModel.apiOrder({ content }).then(response => {
      //   let { data } = response
      //   data = base64.parse(data)
      //   console.log(data)
      // })

      // 这里不下单, 等支付完再下单
      // 跳转到结算页面
      const serial = {
        send: this.send,
        receive: this.receive,
        product: this.product,
        remark: this.remark,
        // time: this.time,
        time: {
          day: this.time_day,
          time: this.time_time
        },
        channel: this.selectChannel,
        ticket: this.ticket,
        type: this.type
      }
      console.log(serial)
      uni.navigateTo({
        url: `/sub_main/order/express?params=${base64.encodeUrl(serial)}`
      })
    },

    // 取消
    onCancel() {
      const content = {
        "waybill": "312611586768519",
        "shopbill": "239678900"
      }

      expressModel.apiCancel({ content }).then(response => {
        let { data } = response
        data = base64.parse(data)
        console.log(data)
      })
    },

    // 查询轨迹
    onQuery() {
      const content = {
        "waybill": "312596422749618",
        "shopbill": "234066048",
        "traceFormat": "obj"  // 可选参数，默认str，返回字符串数组格式轨迹；传obj，返回对象数组格式轨迹
      }

      expressModel.apiQuery({ content }).then(response => {
        let { data } = response
        data = base64.parse(data)
        console.log(data)
      })
    },

    // 地址解析
    parseAddress() {

      // const address = '张三  龙华1980科技文化产业园3栋317       13800138000'
      const address = '张三  天河1980科技文化产业园3栋317       13800138000'

      expressModel.addressParse({ address }).then(response => {
        let { data } = response
        data = base64.parse(data)
        console.log(data)
      })

    },

  },
  onLoad(options) {
    // this.set()
    // console.log(options)
    const type = options.type || 0
    this.type = type
    console.log('type', this.type)
    console.log('onload', this.wx)
    if (type && !this.wx) {
      if (+type === 1) {
        uni.setNavigationBarTitle({
          title: '快递下单'
        })
      } else if (+type === 2) {
        uni.setNavigationBarTitle({
          title: '重货下单'
        })
      } else if (+type === 3) {
        // todo 同城需要判断是不是同一个地区
        // todo 同城没有分开写, 因为需要证件, 获取定位
        uni.setNavigationBarTitle({
          title: '同城'
        })
      }
    }
    // 参数处理
    let params = this.$store.getters['Express/params']
    if (!params) {
      params = {}
    }
    params.ticket = 0
    this.$store.dispatch('Express/set_params', params).then(() => {
      console.log('clear done ...')
    })
  },
  onShow() {
    // 为了处理审核就放在这里了
    this.set()
    console.log('onShow', this.wx)
    // 参数处理
    this.ticket = this.$store.getters['Express/params'].ticket
    this.send = this.$store.getters['Express/params'].send
    this.receive = this.$store.getters['Express/params'].receive
    this.product = this.$store.getters['Express/params'].product
  }
}
</script>

<style scoped lang="scss">
.express-order {
  height: calc(100vh - 40rpx);
  background: #f3f5f7;
  padding: 20rpx 20rpx 400rpx 20rpx;
  font-size: 24rpx;
  .product, .company, .insured, .ticket, .remark, .time {
    margin: 20rpx 0;
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    border-radius: 20rpx;
    height: 40px;
    .left {
      display: flex;
      //background: red;
      width: 200rpx;
      .title {
        margin-right: 10px;
        font-weight: 700;
        font-size: 28rpx;
      }
      .title_sub {
        color: red;
        border: 1rpx solid red;
        padding: 3rpx 10rpx;
        border-radius: 30rpx;
        font-size: 20rpx;
      }
    }
    .right {
      display: flex;
      view {
        color: #999999;
        margin-right: 3px;
        &.active {
          color: #333333;
        }
      }
    }
  }
  .footer {
    z-index: 10;
    background: white;
    position: fixed;
    height: 100px;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    .desc {
      flex: 1;
      display: flex;
      .text {
        width: 180rpx;
        text-align: center;
        font-size: 26rpx;
        font-weight: 700;
      }
      .amount {
        flex: 1;
        color: red;
        font-size: 30rpx;
        font-weight: 700;
      }
    }
    .btn {
      width: 180rpx;
      padding: 0 50rpx;
    }
  }
  .address {
    margin: 20rpx 0;
    padding: 20rpx;
    background: white;
    border-radius: 20rpx;
    .send, .receive {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80px;
      .icon {
        width: 75rpx;
      }
      .info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .name {
          font-size: 28rpx;
          font-weight: 700;
        }
        .desc {
          color: #666666;
          width: 90%;
        }
      }
      .text {
        width: 120rpx;
        font-weight: 700;
      }
    }
    .send {
      border-bottom: 1rpx solid #f3f5f7;
    }
  }
}
.remark-pop {
  padding: 20px;
  .title {
    margin-bottom: 10px;
    font-size: 30rpx;
    font-weight: 700;
  }
  .title_sub {
    color: red;
    font-size: 26rpx;
    font-weight: 700;
  }
  .list {
    padding: 20rpx 0;
    margin-top: 10px;
    height: 300px;
    overflow-y: auto;
    .item {
      min-height: 100px;
      margin-bottom: 10px;
      background: #f3f5f7;
      padding: 20rpx;
      .title {
        display: flex;
        .icon {
          margin-right: 10px;
        }
      }
      .content {
        padding: 20rpx;
        background: white;
        border-radius: 10rpx;
        margin-bottom: 10rpx;
        .title {
          font-size: 24rpx;
        }
        .amount {
          text-align: right;
          color: red;
          height: 30px;
          line-height: 30px;
          font-weight: 700;
          font-size: 36rpx;
          .text {
            font-size: 20rpx;
          }
        }
      }
    }
  }
}
.time-pop {
  padding: 20rpx;
  .title {
    font-weight: 700;
    height: 30px;
    text-align: center;
  }
  .text {
    color: red;
  }
  .list {
    padding: 10px 0;
    display: flex;
    .day {
      width: 200rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .d {
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        &.active {
          background: #f3f5f7;
          font-weight: 700;
          color: red;
        }
      }
    }
    .times {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .t {
        height: 50px;
        line-height: 50px;
        text-indent: 200rpx;
        width: 100%;
        &.active {
          //background: #f3f5f7;
          font-weight: 700;
          color: red;
        }
      }
    }
  }
}
</style>
